<html>
<head>
</head>
<script type="text/javascript">
var webPush = function(args){
  var wp = {
    init: function(){
          this.ul =  window.document.getElementById(args.id);
          this.lastScript = null
    },
    addLi: function(content){
          var newli       = document.createElement('li');
          newli.innerHTML = content;
          this.ul.appendChild(newli);
          this.ul.scrollTop = this.ul.scrollHeight;
          this.removeScript()
    },
    scriptsCount: function(){
          scriptsL  = window.document.getElementsByTagName('SCRIPT');
          this.lastScript = scriptsL[ scriptsL.length - 1 ]
          return scriptsL.length
    },
    removeScript: function(){
          this.scriptsCount();
          if (this.lastScript)
            this.lastScript.parentNode.removeChild(this.lastScript)
    },
    process:function(content){
          var newli= document.createElement('li');
          newli.innerHTML = content;
          this.ul.appendChild(newli);
          this.ul.scrollTop = this.ul.scrollHeight;
          this.removeScript()
          processReceivedString(content)
    }
  };
  wp.init();
  return wp
};

var pushHandler;
</script>
<!--<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js’></script>-->
<!--<script type="text/javascript" src="jquery.min.js"></script>-->
<script type="text/javascript">
//    $(document).ready(function() {
//      alert('a')
//    });
    function createXMLHttpRequest() {
        var xmlHttp;
        if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
        else if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}
        return xmlHttp
    }
    function addResourceButtonClicked()
    {
        resourceName =  window.document.getElementById('addResourceText').value;
        xmlHttp=createXMLHttpRequest()
        operation="addResource="+resourceName
        xmlHttp.open("GET", operation, true);
        xmlHttp.send(null);
        xmlHttp=null
    }
    function test()
    {
//        xmlHttp=createXMLHttpRequest()
//        xmlHttp.open("GET", "http://localhost:8081/stream", true);
//        xmlHttp.send(null);
//        xmlHttp.onmessage=MessageCome;
//        document.getElementById("IFrame").src="http://localhost:8081/stream";
        var str='CD bkc="orange" txtc="black" l1="Q0VMTCAzMw==" l2="" l3="RFVNTVkgQ0VMTCAw" l4=""'
        if (window.DOMParser)
        {
          parser=new DOMParser();
          xmlDoc=parser.parseFromString('<'+str+'/>',"text/xml");
        }
        else // Internet Explorer
        {
          xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.async="false";
          xmlDoc.loadXML('<'+str+'/>');
        }
        debugger;
        elementName=xmlDoc.documentElement.tagName
        allAttributes=xmlDoc.documentElement.attributes
        AddCellToPage(allAttributes)
    }
    function AddCellToPage(allattrs)
    {
        var temp=$("template")
        alert(temp)
//        var templateDiv=window.document.getElementById("template");
//        var newDiv=templateDiv.cloneNode(true)
//        newDiv.id="aaa"
//        var line1Div=newDiv.getElementById("line1")
//        line1Div.innerHTML='123'
//        var cellHolderDiv=window.document.getElementById("cellHolder");
//        cellHolderDiv.appendChild(newDiv)
    }
    function MessageCome(event)
    {
        var response = event.data
        alert(response)
    }

    var xmlHttpAddCell=null;
    function AddCellResource(cellName)
    {
        if(xmlHttpAddCell!=null)
        {
            xmlHttpAddCell.abort()
        }
        xmlHttpAddCell=createXMLHttpRequest()
        operation="addResource="+cellName
        xmlHttpAddCell.open("GET", operation, true);
        xmlHttpAddCell.send(null);
    }
    
    var xmlHttpTR=null;
    function SendTR()
    {
        if(xmlHttpTR!=null)
        {
            xmlHttpTR.abort()
        }
        xmlHttpTR=createXMLHttpRequest()
        operation="sendTR"
        xmlHttpTR.open("GET", operation, true);
        xmlHttpTR.send(null);

    }

    function processReceivedString(str)
    {
        //str='AddCell number="0" display="cellVars:50" input="telnet:53" view="terminalBuffer:52" type="typeBuffer:51" protected="True"'
        //str='WindowDisplay engineRev="Build 2011010501" initScript="3:acmp_20110325004332" b1="CCPMstartGrp" b2="" b3="PRINT LOOK" b4="" b5="TYPE ALL" b6="" b7="" b8="" b9="" b10="" b11="" b12="" m1="CELL START" m2="CELL FINISH" m3="CELL ABORT" m4="CELL VIEW" m5="CELL RESTORE" m6="CELL ATYPE" m7="CELL POWER ON" m8="CELL POWER OFF" m9="" m10="" m11="" m12="" m13="" m14="" m15="" m16="" cellTextWidth="15" cellsWide="5"'
        //debugger;
        if (window.DOMParser)
        {
          parser=new DOMParser();
          xmlDoc=parser.parseFromString('<'+str+'/>',"text/xml");
        }
        else // Internet Explorer
        {
          xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.async="false";
          xmlDoc.loadXML('<'+str+'/>');
        }
        //debugger;
        elementName=xmlDoc.documentElement.tagName
        allAttributes=xmlDoc.documentElement.attributes
        if(elementName=="WindowDisplay")
        {
            for(x=0;x<allAttributes.length;x++)
            {
                attrname=allAttributes[x].name
                attrvalue=allAttributes[x].value
                if(attrname.substr(0,1)=='m'&&attrvalue!='')
                {
                    var selectMenu =  window.document.getElementById("selectMenu");
                    var newOption= document.createElement('option');
                    newOption.innerHTML = attrvalue;
                    selectMenu.appendChild(newOption);
                }
            }
        }
        else if(elementName=="AddCell")
        {
            for(x=0;x<allAttributes.length;x++)
            {
                attrname=allAttributes[x].name
                attrvalue=allAttributes[x].value
                if(attrname=="display")
                {
                    var selectCells =  window.document.getElementById("selectCells");
                    var newOption= document.createElement('option');
                    newOption.innerHTML = attrvalue;
                    selectCells.appendChild(newOption);
                    AddCellResource(attrvalue)
                }
            }
        }
        else if(elementName=="CD")
        {
            //AddCellToPage()
        }
        else if(elementName=="TR")
        {
            SendTR()
        }
    }
</script>
<style type="text/css">
    .cell{
        border-color:black;
        border-style:solid;
        border-width:1px;
        float:left;
        width:120px; height:80px;
        margin-left:2px;
        text-align:center;
        overflow:hidden;
    }
</style>
<body>
<table>
    <tr>
        <td><input type="text" id="addResourceText"/></td>
        <td><input type="button" id="addResourceButton" value="add to streaming" onclick="javascript:addResourceButtonClicked()"/></td>
    </tr>
    <tr>
        <td><span>cells:</span></td>
        <td><select id="selectCells" style="width:120px"><option>Select Cell</option></select></td>
    </tr>
    <tr>
        <td><span>menus:</span></td>
        <td><select id="selectMenu" style="width:120px"><option>Select Menu</option></select></td>
    </tr>
    <tr>
        <td><input type="button" id="testButton" value="test" onclick="javascript:test()"/></td>
        <td></td>
    </tr>
    <tr>
        <td style="display:none"><iframe id="IFrame"></iframe></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="template" class="cell" style="background-color:red;">
                <div id="line1">line1</div>
                <div id="line2">line1wwwwwwwwwwww</div>
                <div id="line3">line1wwwwwwwwwwwwwwwwwwwwwww</div>
                <div id="line4">line1wwwwwww</div>
            </div>
            <div class="cell" style="background-color:#deb887;"></div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="cellHolder" style="width:620px;background-color:#efebde"></div>
        </td>
    </tr>
</table>

    
    <ul id="log">
    </ul>
    <script type="text/javascript">
        /* INIT */
        pushHandler = webPush({id: 'log'});
        pushHandler.addLi('Log started')
        /* This script will remove itself */
    </script>
</body>
</html>